<template>
  <div
    :id="id"
    :class="className"
    :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    data: Object
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    data: {
      handler(val) {
        if (Object.keys(val).length) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      },
      deep: true
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      //   const dataMap = [
      //     { key: 'drawNum', name: '图纸资料', color: '#29c4ce' },
      //     { key: 'thRegulationsNum', name: '技术规章', color: '#ff5361' },
      //     { key: 'opRegNum', name: '作业指导书', color: '#939bf8' }
      //   ]
      const options = {
        color: ['#F86464', '#19DC7C', '#34A6FE', '#FA9022', '#DCDB01', '#8C70F8', '#2A4AD1', '#E76FE3', '#5032C0', '#168FB2'],
        grid: {
          left: '2%',
          top: '1%',
          bottom: 0,
          right: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 14
          },
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          y: 'center',
          left: '5%',
          textStyle: {
            color: '#333',
            fontSize: 14
          },
          itemWidth: 16,
          itemHeight: 8,
          orient: 'vertical'
        },
        calculable: true,
        series: [
          {
            type: 'pie',
            radius: ['69%', '70%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            name: '',
            data: [{
              name: '',
              value: 0,
              itemStyle: {
                normal: {
                  color: '#0674bf'
                }
              }
            }]
          }, {
            stack: 'a',
            type: 'pie',
            radius: ['0%', '60%'],
            center: ['50%', '50%'],
            zlevel: 10,
            label: {
              normal: {
                formatter: '{d}%',
                borderWidth: 0,
                borderRadius: 4,
                padding: [0, -50],
                height: 40,
                fontSize: 12,
                align: 'center',
                rich: {
                  b: {
                    fontSize: 13,
                    lineHeight: 5,
                    color: '#41B3DC'
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 55
              },
              emphasis: {
                show: false
              }
            },
            data: [
              {
                value: 5,
                name: 'crm'
              },
              {
                value: 15,
                name: 'pm'
              },
              {
                value: 25,
                name: 'scm'
              },
              {
                value: 20,
                name: 'hr'
              },
              {
                value: 35,
                name: 'fm'
              }
            ]
          }]
      }
      this.chart.setOption(options)
    }
  }
}
</script>
